import { createRouter, createWebHistory } from 'vue-router'

// 进度条
// 2. 导入进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import { ElMessage } from 'element-plus'

import { useUserStore } from '@/stores'

// 3. 关闭小圆圈
NProgress.configure({
  showSpinner: false
})

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', redirect: '/login' },
    {
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      meta: { title: '登录/注册' }
    },
    {
      path: '/welcome',
      component: () => import('@/views/login/welcome.vue'),
      meta: { title: 'Miss you.' }
    },
    {
      path: '/write',
      component: () => import('@/views/writeNote/index.vue'),
      redirect: '/write/noteText',
      children: [
        {
          path: 'noteText',
          component: () => import('@/views/writeNote/components/noteText.vue'),
          meta: { title: '书写笔记' }
        },
        {
          path: 'uploadImg',
          component: () => import('@/views/writeNote/components/UploadImg.vue'),
          meta: { title: '上传图片' }
        }
      ]
    },
    {
      path: '/home',
      component: () => import('@/views/home/index.vue'),
      meta: { title: '首页' }
    },
    {
      path: '/chat',
      component: () => import('@/views/chat/aloneChat.vue'),
      meta: { title: '聊天室' }
    },
    {
      path: '/insult',
      component: () => import('@/views/insult/index.vue'),
      meta: { title: 'ruhua' }
    },
    {
      path: '/accounting',
      component: () => import('@/views/accounting/index.vue'),
      meta: { title: '记账铺子' }
    },
    {
      path: '/jy',
      component: () => import('@/views/jy/newFriend.vue'),
      meta: { title: '佳瑶酱' }
    },
    {
      path: '/:catchAll(.*)', // 不识别的path自动匹配404
      component: () => import('@/views/error/404.vue'),
      meta: { title: '找不到页面' }
    }
  ]
})

// 路由白名单（后端可以根据用户的权限返回一些私密的路由白名单加入到这里）
let routingWhiteList = ['/', '/home', '/login', '/welcome', '/chat', '/jy']

console.log(routingWhiteList)

// 前置
router.beforeEach((to, from) => {
  NProgress.start()
  // 只要是去往login的页面，一定是要携带上返回页面的页面路径的
  // 但是如果用户要返回的页面不在白名单里，默认只能返回 /home 首页
  // 1. 有token, 不能访问登录页和其他的
  // 2. 没有token, 只能访问白名单页面
  // from 从login来，去往 to
  let userStore = useUserStore()

  // 在白名单里面，直接放行，否则拦截
  if (!(routingWhiteList.findIndex((item) => item === to.path) !== -1)) {
    // 去往的不是白名单,检查token情况
    if (!(userStore.tokenObj && userStore.tokenObj.token)) {
      ElMessage.info('需要重新登录才能继续访问！')
      // 没有token，跳往登录页
      return `/login?backPage=${from.fullPath}`
    }
    // 不在白名单但是有token
  } else {
    // 如果有token还跳往了登录页，不允许放行
    if (
      userStore.tokenObj &&
      userStore.tokenObj.token &&
      to.path === '/login'
    ) {
      return '/home'
    }
  }
})

// 后置路由守卫，配置页面标题
router.afterEach((to) => {
  document.title = `${to.meta.title} | 笔记海` // 页面标题
  // 关闭进度条
  NProgress.done()
})

export default router
